<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>05.向服务器传递JSON格式数据</title>
  </head>
  <body>
    <p>请求参数的格式</p>
    <div>
      <ul>
        <li>
          <span>1. application/x-www-urlencoded</span>
          <p>name=chj&age=20&gender=男</p>
        </li>
        <li>
          <span> 2. application/json</span>
          <p>{name:'chj',age:'20',gender:'男'}</p>
          <p>
            向服务器发送数据的时候必须是字符串，通过JSON.stringify()可以将JSON对象字符串化
          </p>
        </li>
      </ul>
    </div>
    <p>
      姓名:
      <input type="text" name="username" id="username" />
    </p>
    <p>
      年龄:
      <input type="text" name="age" id="age" />
    </p>
    <p>
      <input type="button" value="提交" id="commit" />
    </p>
    <p>提交的数据是：<span class="commit"></span></p>
  </body>
</html>
<script>
  let btn = document.getElementById("commit");
  let username = document.getElementById("username");
  let age = document.getElementById("age");
  btn.onclick = function () {
    let nameValue = username.value;
    let ageValue = age.value;
    console.log(nameValue);
    console.log(ageValue);
    /*
     *     ajax 异步提交
     */
    // 1.创建ajax 对象
    const xhr = new XMLHttpRequest();
    //获取表单提交的数据
    // let params = "username=" + nameValue + "&age=" + ageValue;
    let params = {
      username: nameValue,
      age: ageValue,
    };
    // 2. 配置ajax对象  增加传递的参数   POST方式
    xhr.open("post", "http://localhost:3000/json");
    //post 提交设置 request header 表明请求的数据类型
    xhr.setRequestHeader("Content-Type", "application/json");
    // 需要将发送的数据进行格式转化【转化为字符串】
    let paramsString = JSON.stringify(params);
    // 3. 发送数据给服务器【服务器只接收字符串类型数据】
    xhr.send(paramsString); //Json对象转换为Json字符串
    // 4. 对响应的数据做处理
    xhr.onload = function () {
      // 响应的数据
      console.log(xhr.responseText);
      document.getElementsByClassName("commit")[0].innerHTML = xhr.responseText;
    };
  };
</script>
